<script setup lang="ts">
import { ref, computed, provide, inject } from 'vue';
import { getRandomId } from './utils/index';
import TodoInput from './components/TodoInput.vue';
import TodoList from './components/TodoList.vue';


const todoInputValue = ref<string>('');

const todoList = ref<{
  id: string;
  todoDesc: string;
  isCompleted: boolean;
}[]>([]);

const completedTodoCount = computed(() => {
  return todoList.value.filter(item => item.isCompleted).length;
});


const addTodo = () => {
  todoList.value.push({
    id: getRandomId(),
    todoDesc: todoInputValue.value,
    isCompleted: false,
  });
  todoInputValue.value = '';
}

const toggleTodoStatus = (todoId: string) => {
  const todoIdOfIndex = todoList.value.findIndex(item => item.id === todoId);
  todoList.value[todoIdOfIndex].isCompleted = !todoList.value[todoIdOfIndex].isCompleted;
}
</script>

<template>
  <div class="todo-list-box">
    <TodoInput
      v-model:todoInputValue="todoInputValue"
      @add-todo="addTodo"
    />

    <TodoList
      :todo-list="todoList"
      @toggle-todo-status="toggleTodoStatus"
    />

    <div v-show="todoList.length">
      {{ completedTodoCount }} / {{ todoList.length }}
    </div>
  </div>
</template>

<style>
.todo-list-box {
  margin: 0 auto;
  width: 500px;
  background-color: #eee;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .todo-list-input {
    font-size: 20px;
  }
}
</style>
